<template>
  <div>
    <div id="myChart" :style="{width: '100%', height: '300px'}"></div>
    <Table border :columns="columns5" :data="data5"></Table>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      columns5: [
        {
          title: "学习时间",
          key: "date",
        },
        {
          title: "宿舍时间",
          key: "name"
        },
        {
          title: "运动时间",
          key: "age",
        },
        {
          title: "其他时间",
          key: "address"
        }
      ],
      data5: [
        {
          name: "上涨5%",
          age: "下降5%",
          address: "上涨2%",
          date: "下降2%"
        },
      ]
    };
  },
  mounted() {
    this.echart();
  },
  methods: {
    echart() {
      var myChart = echarts.init(document.getElementById("myChart"));

      var data = [
        {
          name: "学习时间",
          value: 54
        },
        {
          name: "宿舍时间",
          value: 44
        },
        {
          name: "运动时间",
          value: 35
        },
        {
          name: "其他时间",
          value: 30
        },
        {
          name: "商贸物流",
          value: 20
        }
      ];

      var titleArr = [],
        seriesArr = [];
      let colors = [
        ["#389af4", "#dfeaff"],
        ["#ff8c37", "#ffdcc3"],
        ["#ffc257", "#ffedcc"],
        ["#fd6f97", "#fed4e0"],
        ["#a181fc", "#e3d9fe"]
      ];
      data.forEach(function(item, index) {
        titleArr.push({
          text: item.name,
          left: index * 20 + 10 + "%",
          top: "80%",
          textAlign: "center",
          textStyle: {
            fontWeight: "normal",
            fontSize: "16",
            color: colors[index][0],
            textAlign: "center"
          }
        });
        seriesArr.push({
          name: item.name,
          type: "pie",
          clockWise: false,
          radius: [60, 70],
          itemStyle: {
            normal: {
              color: colors[index][0],
              shadowColor: colors[index][0],
              shadowBlur: 0,
              label: {
                show: false
              },
              labelLine: {
                show: false
              }
            }
          },
          hoverAnimation: false,
          center: [index * 20 + 10 + "%", "50%"],
          data: [
            {
              value: item.value,
              label: {
                normal: {
                  formatter: function(params) {
                    return params.value + "%";
                  },
                  position: "center",
                  show: true,
                  textStyle: {
                    fontSize: "20",
                    fontWeight: "bold",
                    color: colors[index][0]
                  }
                }
              }
            },
            {
              value: 100 - item.value,
              name: "invisible",
              itemStyle: {
                normal: {
                  color: colors[index][1]
                },
                emphasis: {
                  color: colors[index][1]
                }
              }
            }
          ]
        });
      });

      let option = {
        backgroundColor: "#fff",
        title: titleArr,
        series: seriesArr
      };
      myChart.setOption(option);
    }
  }
};
</script>

<style scoped>
</style>